<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>


<div id="app">
    <h3>添加购物车</h3>
    <p>商品编号<input type="text" v-model="product.pId"></p>
    <p>商品名称<input type="text" v-model="product.pName"></p>
    <p>商品价格<input type="text" v-model="product.pPrice"></p>
    <p>商品数量<input type="text" v-model="product.pNumber"></p>
    <p>
        <button @click="addCar">添加购物车</button>
    </p>

    <hr>

    <table border="1px" cellspacing="0" style="width: 80%">
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>总价格</th>
        </tr>
        <tr v-for="(pdt,index) in products" :key="index">
            <td>{{ pdt.pId }}</td>
            <td>{{ pdt.pName }}</td>
            <td>{{ pdt.pPrice }}</td>
            <td>
                <button @click="sub(index)">-</button>
                <span>{{ pdt.pNumber }}</span>
                <button @click="add(index)">+</button>
            </td>
            <td>{{ pdt.pPrice * pdt.pNumber }}</td>
        </tr>
    </table>
    <p>总计:{{ totalPrice}}</p>
</div>

<script>

    let vm = new Vue({
        el: '#app',
        data: {
            product: {
                pId: '',
                pName: '',
                pPrice: '',
                pNumber: ''
            },
            products: [
                {
                    pId: '1',
                    pName: '小米14',
                    pPrice: '2000',
                    pNumber: '1'
                }
            ]
        },
        methods: {
            addCar() {

                // 商品信息的检查
                if (this.product.pId.trim().length == 0 || isNaN(this.product.pId.trim())) {
                    alert("请填写合法的商品编号")
                    return
                }
                if (this.product.pName.trim().length == 0) {
                    alert("请填写合法的商品名称")
                    return
                }

                if (this.product.pPrice.trim().length == 0  || this.product.pPrice.trim()<0) {
                    alert("请填写合法的商品价格")
                    return
                }

                if (this.product.pNumber.trim().length == 0  || this.product.pNumber.trim()<0) {
                    alert("请填写合法的商品数量")
                    return
                }

                this.products.push(this.product)
                // 商品添加购物车之后  清空商品信息
                this.product = {
                    pId: '',
                    pName: '',
                    pPrice: '',
                    pNumber: ''
                }
            },
            sub(index){
                
                let product = this.products[index];
                if (product.pNumber==1){
                    alert("商品的数量不能小于1")
                    return
                }
                product.pNumber --
                
            },
            add(index){
                let product = this.products[index];
                product.pNumber ++
            }
            // totalPrice(){   // 计算商品的总价格
            //     console.log("-----------totalPrice()----------")
            //     let  total = 0
            //     this.products.forEach(pdt=>{
            //         total+= pdt.pPrice * pdt.pNumber
            //     })
            //     return total
            // }
        },
        computed:{   // 计算属性
            totalPrice(){   // 计算商品的总价格
                console.log("-----------computed totalPrice()----------")
                let  total = 0
                this.products.forEach(pdt=>{
                    total+= pdt.pPrice * pdt.pNumber
                })
                return total
            }
        }
    })


    /*
    *     methods:    定义事件回调函数的位置
    *          1.回调函数调用一次则执行一次
    *          2. {{totalPrice()}}
    *     computed:   计算属性
    *          1. computed 中定义的函数  多次使用时 只会调用一次 后续的使用会从缓存中获取
    *          2. 当数据发生改变时  再次调用重新计算  只会调用一次
    *          3. {{totalPrice}}
    *     一般在使用vue进行数据渲染时  如果展示的数据不能直接获取 需要进行一定的数据处理 则使用computed计算属性效率较高
    * */
</script>
</body>
</html>